<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>DS_SaoDiSheng</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="lib/layui/layui.all.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>
<body>
<script>
    <!--前后端交互层-->
    $(function(){
        var id = parent.id;
        console.log(id)
        var data4Vue = {
            uri: 'users',
            listURL:'/',
            bean: '',
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.get();
            },
            methods: {
                get:function(){
                    var url = this.uri + "/" + id;
                    axios.get(url).then(function(response) {
                        vue.bean = response.data;
                    })
                },
                update:function () {
                    if(!checkEmpty(this.bean.name, "用户名"))
                        return;
                    if (!checkEmpty(this.bean.address, "用户地址"))
                        return;
                    var url = this.uri;
                    axios.put(url, vue.bean).then(function(response){
                        // location.href = vue.listURL;
                        layer.close(layer.index);
                    });
                }
            }
        });
    });
</script>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid" id="workingArea">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <tr>
                            <td>用户姓名</td>
                            <td><input  @keyup.enter="update" v-model.trim="bean.name" type="text" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>用户地址</td>
                            <td><input  @keyup.enter="update" v-model.trim="bean.address" type="text" class="form-control"></td>
                        </tr>

                        <tr class="submitTR">
                            <td colspan="2" align="center">
                                <input type="hidden" name="id"   v-model.trim="bean.id" >
                                <a href="#nowhere"  @click="update" class="btn btn-success">修改</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    //判断是否为空
    function checkEmpty(value,text){

        if(null==value || value.length==0){
            alert(text+ "不能为空");
            return false;
        }
        return true;
    }
    //确实是否要删除
    function checkDeleteLink(){
        var confirmDelete = confirm("确认要删除");
        if(confirmDelete)
            return true;
        return false;
    }

    //分页跳转函数，向前跳或者向后跳，或者跳转到第一页或者最后一页。
    function jump(page,vue){
        if('first'== page && !vue.pagination.first)
            vue.list(0);

        else if('pre'== page &&	vue.pagination.hasPrevious )
            vue.list(vue.pagination.number-1);

        else if('next'== page && vue.pagination.hasNext)
            vue.list(vue.pagination.number+1);

        else if('last'== page && !vue.pagination.last)
            vue.list(vue.pagination.totalPages-1);
    }
    //分页跳转函数，跳转到指定页
    function jumpByNumber(start,vue){
        if(start!=vue.pagination.number)
            vue.list(start);
    }
</script>
</html>